<template>
  <view class="contentBox">
    <h-line :height="tops"></h-line>
    <view class="headerBox">
      <u-icon name="arrow-left" color="#333333" size="20" @click="toShopIndex"></u-icon>
      <view class="searchBox">
        <view class="searchIcon">
          <u-icon name="search" color="#BDBDBD" size="24"></u-icon>
        </view>
        <input
          type="text"
          placeholder="请输入您要搜索的内容"
          placeholder-style="font-size: 28rpx;color: #999999;"
          :focus="focus"
          @focus="onFocus"
          :maxlength="26"
          @confirm="confirmClick"
          v-model.trim="searchValue"
          @input="onChange1"
          confirmType="search"
        />
        <view class="closeIcon" v-if="searchValue" @click="closeIconClick">
          <u-icon name="close-circle-fill" color="#BDBDBD" size="18"></u-icon>
        </view>
        <view class="searchText" @click="confirmClick">搜索</view>
        <view calss="search_clear"></view>
      </view>
    </view>
    <view
      v-if="searchValue === ''"
      style="display: flex; flex-direction: column; padding: 0rpx 24rpx"
    >
      <view class="historySearchBox" v-if="oldKeywordList?.length > 0">
        <view class="historySearchBoxTop">
          <text class="historySearchBoxTopText">历史搜索</text>
          <image
            v-if="oldKeywordList?.length > 0 && deleteShow == false"
            style="width: 27rpx; height: 30rpx"
            src="@/static/home/del1@2x.png"
            @click="deleteShowClick()"
          />
          <view class="deleteAllBox" v-if="deleteShow">
            <text @click="oldDelete()">全部删除</text>
            <text></text>
            <text @click="deleteOk">完成</text>
          </view>
        </view>
        <view class="historySearchItem" v-if="!isDown">
          <view
            class="hotItem"
            :style="{ paddingRight: deleteShow ? '13rpx' : '20rpx' }"
            v-for="(item, index) in oldKeywordList"
            v-show="index < 6"
            :key="index"
          >
            <text class="hotItemText" @click="gotoSearch(item.words)">{{
              item?.words.length > 4 ? item?.words.substring(0, 4) + '...' : item.words
            }}</text>
            <u-icon
              v-if="deleteShow"
              name="close"
              color="#000000"
              size="12"
              style="margin-left: 10rpx"
              @click="oldDeleteIndex(item)"
            ></u-icon>
          </view>
          <view class="unpackBox" @click.stop="isDown = true" v-if="oldKeywordList?.length >= 7">
            <image src="@/static/images/down.png"></image>
          </view>
        </view>
        <view v-else class="historySearchItem">
          <view
            class="hotItem"
            :style="{ paddingRight: deleteShow ? '13rpx' : '20rpx' }"
            v-for="(item, index) in oldKeywordList"
            v-show="index <= 20"
            :key="index"
          >
            <text class="hotItemText" @click="gotoSearch(item.words)">{{
              item?.words.length > 4 ? item?.words.substring(0, 4) + '...' : item.words
            }}</text>
            <u-icon
              v-if="deleteShow"
              name="close"
              color="#000000"
              size="12"
              style="margin-left: 10rpx"
              @click="oldDeleteIndex(item)"
            ></u-icon>
          </view>
          <view class="unpackBox" @click.stop="isDown = false">
            <image src="@/static/images/up.png"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
  <h-modal
    :show="bindShow"
    titlea="确认删除全部历史搜索"
    leftBtn="取消"
    rightBtn="确定"
    @clear="bindShow = false"
    @bind="delAll"
  ></h-modal>
</template>

<script setup>
import { useMemberStore, useSystemStore } from '@/stores'
import { ref, onMounted, watch } from 'vue'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import { navigateTo, navigateBack } from '@/utils/index'
import { ycDietSearchList, ycDietHandleSearchWords, ycDelAllHistory } from '@/api/weight/index.js'
// 手机状态栏的高度
const tops = ref(0)
const focus = ref(false)
const combinedData = ref([])
const page = ref(1)
const searchParams = ref({
  page: 1,
  limit: 8,
  cateId: 3,
})
const num = ref(0)
const bindShow = ref(false)
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      tops.value = e.statusBarHeight * 2
    },
  })
})
const index = ref()
const searchValue = ref('')
var props = defineProps({
  isShow: Boolean,
  keywords: String,
  dateTime: String,
  meal: String,
})
const isDown = ref(false)
const path = ref()
// 搜索value
// 历史搜索
const oldKeywordList = ref([])
onLoad((o) => {
  if (o.index) {
    index.value = o.index
  }
})
onBackPress((o) => {
  return false
})
onShow(() => {
  if (props?.keywords) {
    searchValue.value = props?.keywords
  }
  if (props.isShow == true) {
    searchValue.value = ''
  }
  focus.value = true
  // 加载历史搜索
  getOldList()
})

function onDown() {
  isDown.value = true
}

function toShopIndex() {
  navigateBack()
}

function onFocus() {
  focus.value = true
}
// 回车键
function confirmClick() {
  if (searchValue.value.length > 0) {
    saveKeyword(searchValue.value)
    if (index.value) {
      uni.redirectTo({
        url:
          '/pregnancys/weight-management/diet-record/searchResult?searchValue=' +
          searchValue.value +
          '&dateTime=' +
          props.dateTime +
          '&meal=' +
          props.meal,
      })
    } else {
      uni.redirectTo({
        url:
          '/pregnancys/weight-management/diet-record/searchResult?searchValue=' +
          searchValue.value +
          '&dateTime=' +
          props.dateTime +
          '&meal=' +
          props.meal,
      })
    }
  }
}
// 点击热门搜索或者搜索历史的某个
function gotoSearch(e) {
  searchValue.value = e
  deleteShow.value = false
  if (index.value) {
    uni.redirectTo({
      url:
        '/pregnancys/weight-management/diet-record/searchResult?searchValue=' +
        e +
        '&dateTime=' +
        props.dateTime +
        '&meal=' +
        props.meal,
    })
  } else {
    uni.redirectTo({
      url:
        '/pregnancys/weight-management/diet-record/searchResult?searchValue=' +
        e +
        '&dateTime=' +
        props.dateTime +
        '&meal=' +
        props.meal,
    })
  }
}
async function getOldList() {
  var res = await ycDietSearchList({ limit: 20 })
  oldKeywordList.value = res.data.data
}
/**
 * 保存历史搜索
 */
async function saveKeyword(keyword) {
  handle(keyword, 1)
  getOldList()
}
async function handle(keyword, type, id) {
  await ycDietHandleSearchWords({
    keyword: keyword,
    type: type,
    id: id,
  })
  getOldList()
}
function oldDelete() {
  bindShow.value = true
}
async function delAll() {
  var res = await ycDelAllHistory({
    type: 1,
  })
  if (res.code == 200) {
    oldKeywordList.value = []
  }
  bindShow.value = false
}
// 删除某条历史记录
function oldDeleteIndex(row) {
  handle(row.words, 2, row.id)
}
// 清空搜索框
function closeIconClick() {
  searchValue.value = ''
}
// 点击删除图标出现选项的状态
const deleteShow = ref(false)
// 点击删除图标事件
function deleteShowClick() {
  deleteShow.value = true
}
// 点击删除图标出现后出现的完成按钮
function deleteOk() {
  deleteShow.value = false
}
onMounted(() => {})
// 搜索框input事件
var onChange1 = (e) => {
  let word = e.detail.value
    .split(' ')
    .filter((item) => item !== '')
    .join('')
}
</script>
<style lang="scss" scoped>
.contentBox {
  // padding: 0rpx 24rpx;
}

.u_line_cell {
  height: 20rpx;
  background-color: #f5f5f5;
}

.headerBox {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
}

.searchBox {
  margin-left: 20rpx;
  width: 639rpx;
  height: 64rpx;
  background: #f6f6f6;
  border-radius: 32rpx;
  position: relative;
  input {
    width: 639rpx;
    height: 64rpx;
    background: #f6f6f6;
    border-radius: 32rpx;
    padding: 0rpx 170rpx 0rpx 76rpx;
    font-size: 28rpx;
    color: #333333;
  }
  .searchIcon {
    position: absolute;
    left: 31rpx;
    top: 9rpx;
  }
  .closeIcon {
    position: absolute;
    right: 130rpx;
    top: 14rpx;
    z-index: 10;
  }
  .searchText {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 111rpx;
    height: 54rpx;
    line-height: 54rpx;
    background: linear-gradient(180deg, #cb9fff 0%, #a28aff 100%);
    border-radius: 27rpx;
    font-size: 30rpx;
    color: #ffffff;
    position: absolute;
    right: 5rpx;
    top: 5rpx;
  }
  .notice_bar {
    position: absolute;
    width: 600rpx;
    height: 64rpx;
    right: -19rpx;
    top: 1rpx;
  }
  .search_focus {
    position: absolute;
    width: 500rpx;
    height: 64rpx;
    left: 0rpx;
    top: 0;
    background-color: transparent;
  }
}

.historySearchBox {
  margin: 30rpx 26rpx 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .historySearchBoxTop {
    display: flex;
    align-items: center;
    line-height: 45rpx;
    justify-content: space-between;
    .historySearchBoxTopText {
      font-weight: 800;
      font-size: 32rpx;
      color: #000000;
    }
    .deleteAllBox {
      display: flex;
      align-items: center;
      text:nth-of-type(1) {
        display: block;
        font-size: 22rpx;
        color: #666666;
      }
      text:nth-of-type(2) {
        display: block;
        width: 3rpx;
        height: 18rpx;
        background: #e2e2e2;
        margin: 0rpx 20rpx;
      }
      text:nth-of-type(3) {
        display: block;
        font-size: 22rpx;
        color: #666666;
      }
    }
    .changeBox {
      display: flex;
      align-items: center;
      text {
        display: block;
        margin-right: 6rpx;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
  .historySearchItem {
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 700rpx;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    left: -15rpx;
    .down_icon {
      display: flex;
      color: #666666;
      margin-right: 30rpx;
      margin-top: 20rpx;
      background: #f6f6f6;
      border-radius: 80rpx;
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
    .hotItem {
      display: flex;
      padding: 0 0 0 20rpx;
      line-height: 48rpx;
      color: #666666;
      margin: 20rpx 15rpx 0;
      background: #f6f6f6;
      border-radius: 80rpx;
      text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #666666;
      }
    }
    .unpackBox {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f6f6f6;
      border-radius: 50%;
      margin-top: 20rpx;
      /*position: absolute;
      bottom: 0;
      right: 0;*/
      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  .searchFindBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 208rpx;
    .searchFindItem:nth-of-type(odd) {
      width: calc(60% - 20rpx);
      margin-right: 20rpx;
      display: flex;
      align-items: center;
    }
    .searchFindItem:nth-of-type(even) {
      width: 40%;
    }
    .searchFindItem {
      margin-top: 20rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .img_icon {
        width: 40rpx;
        height: 40rpx;
        margin-left: 10rpx;
        .img {
          width: 38rpx;
          height: 38rpx;
        }
      }
      text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
}

.historyHotBox {
  margin: 30rpx 26rpx;
  background-color: #fff;
  .historySearchBoxTop {
    display: flex;
    line-height: 45rpx;
    align-items: center;
    justify-content: space-between;
    .historySearchBoxTopText {
      font-weight: 800;
      font-size: 32rpx;
      color: #000000;
    }
    .deleteAllBox {
      display: flex;
      align-items: center;
      text:nth-of-type(1) {
        display: block;
        font-size: 22rpx;
        color: #666666;
      }
      text:nth-of-type(2) {
        display: block;
        width: 3rpx;
        height: 18rpx;
        background: #e2e2e2;
        margin: 0rpx 20rpx;
      }
      text:nth-of-type(3) {
        display: block;
        font-size: 22rpx;
        color: #666666;
      }
    }
    .changeBox {
      display: flex;
      align-items: center;
      text {
        display: block;
        margin-right: 6rpx;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
  .historySearchItem {
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 670rpx;
    .down_icon {
      position: absolute;
      width: 48rpx;
      height: 48rpx;
      right: -10rpx;
      bottom: 0rpx;
    }
    .hotItem {
      display: flex;
      max-width: 190rpx;
      padding: 6rpx 0 6rpx 20rpx;
      font-size: 26rpx;
      color: #666666;
      margin-right: 30rpx;
      margin-top: 20rpx;
      background: #f6f6f6;
      border-radius: 80rpx;
      text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #666666;
      }
    }
    .unpackBox {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f6f6f6;
      border-radius: 50%;
      margin-top: 20rpx;
    }
  }
  .searchFindBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .searchFindItem:nth-of-type(odd) {
      width: calc(50% - 20rpx);
      margin-right: 20rpx;
    }
    .searchFindItem:nth-of-type(even) {
      width: 50%;
      padding-left: 100rpx;
    }
    .searchFindItem {
      display: flex;
      align-items: center;
      margin-top: 18rpx;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .img_icon {
        width: 27rpx;
        height: 34rpx;
        margin-left: 10rpx;
        .img {
          width: 27rpx;
          height: 34rpx;
        }
      }
      text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 28rpx;
        color: #333333;
        max-width: 163rpx;
      }
    }
  }
}

.hotBox {
  background: linear-gradient(180deg, #fffaed 0%, #ffffff 30%);
  border-radius: 16rpx;
  margin: 20rpx 25rpx 42rpx 17rpx;
  margin-top: 45rpx;
  .hotBox_top {
    display: flex;
    align-items: center;
    padding-left: 9rpx;
    overflow: hidden;
    image {
      width: 107rpx;
      height: 43rpx;
      margin-right: 38rpx;
      flex-shrink: 0;
    }
    .tabsBox {
      min-width: 0;
      flex: 1;
    }
  }
  .hotBox_itemBox {
    margin-top: 30rpx;
    margin-left: 17rpx;
    padding-right: 35rpx;
    .hotBox_item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      .hotBox_itemNumClass {
        width: 38rpx;
        height: 38rpx;
        background-size: 38rpx 38rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 28rpx;
        color: #ffffff;
      }
      .hotBox_itemNumClass1 {
        background: url(@/static/search/oneIcon.png) no-repeat top center;
        width: 38rpx;
        height: 38rpx;
        background-size: 38rpx 38rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 28rpx;
        color: #ffffff;
        margin-right: 17rpx;
      }
      .hotBox_itemNumClass2 {
        background: url(@/static/search/twoIcon.png) no-repeat top center;
        width: 38rpx;
        height: 38rpx;
        background-size: 38rpx 38rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 28rpx;
        color: #ffffff;
        margin-right: 17rpx;
      }
      .hotBox_itemNumClass3 {
        background: url(@/static/search/threeIcon.png) no-repeat top center;
        width: 38rpx;
        height: 38rpx;
        background-size: 38rpx 38rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 28rpx;
        color: #ffffff;
        margin-right: 17rpx;
      }
      .hotBox_itemNum {
        width: 38rpx;
        height: 38rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        margin-right: 17rpx;
        flex-shrink: 0;
        text-align: center;
      }
      .hotBox_itemText {
        flex: 1;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

::v-deep .u-tabs__wrapper__nav__item-0 {
  background-image: url('@/static/search/rsbImg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  .u-tabs__wrapper__nav__item__text {
    display: none;
    span {
      display: none;
    }
  }
}

::v-deep .uicon-volume {
  display: none;
}

::v-deep .u-notice-bar {
  border-radius: 32rpx;
}

::v-deep .u-notice__swiper__item__text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #999999;
}

::v-deep .u-cell-group__wrapper {
  // (.u_line) {
  //   display: none;
  // }
}
</style>
